<!-- 阴影 -->
<template>
    <div class="si-shadow">
        <layout-pane :label="label">
            <div class="row-item">
                <div class="col-item">
                    <el-radio v-model="currentBoxStyle" :label="false">无效果</el-radio>
                </div>
                <div class="col-item" style="margin-left: 30px">
                    <el-radio v-model="currentBoxStyle" :label="true">阴影</el-radio>
                </div>
            </div>
        </layout-pane>

        <template v-if="currentBoxStyle">
            <div class="row-item" style="margin-top: 12px">
                <div class="col-item">
                    <si-input-number v-model="currentBoxX" label="X轴偏移" />
                </div>
                <div class="col-item">
                    <si-input-number v-model="currentBoxR" label="模糊半径" />
                </div>
            </div>

            <div class="row-item">
                <div class="col-item">
                    <si-input-number v-model="currentBoxY" label="Y轴偏移" />
                </div>
                <div class="col-item">
                    <si-color-picker v-model="currentBoxColor" label="阴影颜色" show-alpha />
                </div>
            </div>
        </template>
    </div>
</template>

<script>
import { defineComponent, toRefs, computed } from 'vue'
import LayoutPane from '../../layout-pane'
import SiColorPicker from '../si-color-picker'
import SiInputNumber from '../si-input-number'
export default defineComponent({
    name: 'SiShadow',
    components: {
        LayoutPane,
        SiColorPicker,
        SiInputNumber
    },
    props: {
        label: {
            type: String,
            default: '边框阴影'
        },
        boxStyle: {
            type: Boolean,
            default: false
        },
        boxR: {
            type: [Number, String]
        },
        boxX: {
            type: [Number, String]
        },
        boxY: {
            type: [Number, String]
        },
        boxColor: {
            type: String
        }
    },
    emits: [
        'update:boxStyle',
        'update:boxR',
        'update:boxX',
        'update:boxY',
        'update:boxColor',
        'change'
    ],
    setup(props, { emit }) {
        const { label, boxStyle, boxR, boxX, boxY, boxColor } = toRefs(props)

        const shadowStr = computed(() => `${boxX.value}px ${boxY.value}px ${boxR.value}px ${boxColor.value}`)

        const currentBoxStyle = computed({
            get: () => boxStyle.value,
            set: val => {
                emit('update:boxStyle', val)
                emit('change', val ? shadowStr.value : '')
            }
        })

        const currentBoxR = computed({
            get: () => boxR.value,
            set: val => {
                emit('update:boxR', val)
                emit('change', shadowStr.value)
            }
        })

        const currentBoxX = computed({
            get: () => boxX.value,
            set: val => {
                emit('update:boxX', val)
                emit('change', shadowStr.value)
            }
        })

        const currentBoxY = computed({
            get: () => boxY.value,
            set: val => {
                emit('update:boxY', val)
                emit('change', shadowStr.value)
            }
        })

        const currentBoxColor = computed({
            get: () => boxColor.value,
            set: val => {
                emit('update:boxColor', val)
                emit('change', shadowStr.value)
            }
        })

        return {
            label,

            currentBoxStyle,
            currentBoxR,
            currentBoxX,
            currentBoxY,
            currentBoxColor
        }
    }
})
</script>

<style lang="less" scoped>
.si-shadow {
    .row-item {
        display: flex;
        align-items: center;
        & + .row-item {
            margin-top: 10px;
        }
        .col-item {
            & + .col-item {
                margin-left: 12px;
            }
        }
    }
}
</style>